<template>
	<view class="">

		<view class="padding-sm solids-bottom" :style="{height: listLoading?'25vh':'20vh'}">
			<view class="flex align-center " style="width: 100%;">
				<view class="flex align-center flex-1">
					<text class="text-bold">开始时间</text>
					<picker class="margin-left-sm solids padding-xs text-grey" mode="date" @change="bindDateChange"
						data-type='createdStartTime' style="width: 50%;">
						<view class="">
							{{searchData.createdStartTime?searchData.createdStartTime:'选择开始时间'}}
						</view>
					</picker>
				</view>
				<view class="flex align-center flex-1">
					<text class="text-bold">结束时间</text>
					<picker class="margin-left-sm solids padding-xs text-grey" mode="date" @change="bindDateChange"
						data-type='createdEndTime' style="width: 50%;">
						<view class="">
							{{searchData.createdEndTime?searchData.createdEndTime:'选择开始时间'}}
						</view>
					</picker>
				</view>
			</view>
			<view class="flex align-center" style="width: 100%;">

				<view class="flex align-center margin-top-sm flex-1">
					<view class="flex align-center flex-1 solid-bottom">
						<text class="text-bold">设备信息</text>
						<view class="margin-left-sm solids padding-xs" style="width: 80%;">
							<input disabled v-model="searchData.equalKeyWord" class="text-grey" placeholder="请输入" />
						</view>
					</view>

				</view>
			</view>
			<view class="flex align-center margin-top-sm">
				<view class="flex-1 text-right">
					<button @click="initData(searchData)" class="cu-btn bg-blue">
						搜索
					</button>
					<button @click="restInitData(searchData)" class="cu-btn bg-yellow margin-left-sm">
						重置
					</button>
				</view>
			</view>
			<view v-if="listLoading" class="flex align-center margin-top-sm">
				<view class="flex align-center justify-center flex-1">
					<block>
						<text class="text-bold margin-right-xs">正在加载中</text>
						<image src="../../static/5-121204193R0-50.gif" style="width: 50rpx;height: 50rpx;"></image>
					</block>
				</view>
			</view>
		</view>

		<scroll-view scroll-y :style="[listLoading?{height:'calc(100vh - ' + CustomBar + 'px  - 35vh)'}
		:{height:'calc(100vh - ' + CustomBar + 'px  - 30vh)'}]" :scroll-top="scrollTop" @scroll="scroll">
			<view v-for="(item,index) in tableData" :key="index" @click="repairDetail(item)">
				<view :data-id="item.repairNo" :data-num='item.nowRepairStep' :data-no="item.equipmentNo"
					style="padding:0 20rpx ;"
					class="bg-grey text-sm shadow-warp full-solids-bottom list_main_item margin-top-sm">
					<view class="flex justify-between align-center">
						<view class="flex-4 ">
							<view class="margin-top-sm text-sm">
								<text class="item-label">工器具名称：</text>
								<text class="">{{item.toolName || '--'}}</text>
							</view>

							<view class="margin-top-sm text-sm">
								<text class="item-label">物料编码：</text>
								<text class="">{{item.materialCode|| '--'}} </text>
							</view>
							<view class="margin-top-sm text-sm">
								<text class="item-label">UTC编码：</text>
								<text class="">{{item.utcCode|| '--'}} </text>
							</view>
							<view class="margin-top-sm text-sm">
								<text class="item-label">出厂编码：</text>
								<text class="">{{item.serialNumber|| '--'}} </text>
							</view>
							<view class="margin-top-sm text-sm" v-if="item.isInspected === '是'">
								<text class="item-label">检验有效期：</text>
								<text class="">{{item.inspectionValidityPeriod|| '--'}} </text>
							</view>
							<view class="margin-top-sm text-sm" v-else>
								<text class="item-label">保养有效期：</text>
								<text class="">{{item.maintenanceValidityPeriod|| '--'}} </text>
							</view>

						</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<view class="flex align-center justify-center" style="position: absolute;bottom: 0;height: 10vh;width: 100%;">
			<wyb-pagination :current="pageNum" :page-items="pageSize" :total-items="total" @change="pageChange" />
		</view>
	</view>
</template>

<script>
	import {
		deepClone,
		isEmpty
	} from "@/common/base";

	import wybPagination from '@/components/wyb-pagination/wyb-pagination.vue'
	export default {
		data() {
			return {
				scrollHeight: 20,
				listLoading: false,
				scrollTop: 0,
				old: {
					scrollTop: 0
				},
				pageNum: 1,
				pageSize: 5,
				total: 0,
				searchData: {
					equalKeyWord: '',
					keyWord: '',
					createdStartTime: '',
					createdEndTime: ''
				},
				noOrderSize: 0,
				orderSize: 0,
				mainList: [],
				equipmentNo: '',
				searchText: '',
				unmainList: [],
				Tabtatus: 0,
				TabCur: 0,
				tableData: [],
				CustomBar: this.CustomBar
			}
		},
		props: {
			repairSearch: Object
		},
		mounted() {
			var that = this;
			this.initSearch()
			that.initData();
		},
		methods: {
			initSearch() {
				this.searchData.equalKeyWord = this.repairSearch.materialCode + ',' + this.repairSearch.serialNumber
			},
			scroll: function(e) {
				this.old.scrollTop = e.detail.scrollTop
			},
			goTop: function(e) {
				this.scrollTop = this.old.scrollTop
				this.$nextTick(() => {
					this.scrollTop = 0
				});
			},
			pageChange(e) {
				var that = this;
				console.log(e);
				that.pageNum = e.current;
				that.initData(that.searchData);
			},
			bindDateChange(e) {
				var that = this;
				let operTime = [];
				let value = e.detail.value;
				let type = e.currentTarget.dataset.type;
				that.searchData[type] = value;
				that.$forceUpdate();
			},

			restInitData() {
				var that = this;
				that.searchData = {
					equalKeyWord: '',
					keyWord: '',
					createdStartTime: '',
					createdEndTime: ''
				};
				that.initData();
			},
			repairDetail(row) {
				uni.navigateTo({
					url: '/pages/index/index' + '?rowKey=' + row.id
				})

			},
			initData() {
				var that = this;
				const params = deepClone(that.searchData)
				if (isEmpty(params.createdEndTime)) {
					delete params.createdEndTime
				}
				if (isEmpty(params.createdStartTime)) {
					delete params.createdStartTime
				}
				params.status = '1'
				params.pageNum = that.pageNum
				params.pageSize = that.pageSize
				that.listLoading = true;
				that.$api.postAPI('/tpm/api/repair/list', params).then(res => {
					if (res.code == 0) {
						let resData = res.data.rows;
						that.tableData = resData;
						that.total = res.data.total;
					} else {
						that.tableData = [];
						that.total = 0;
						uni.showToast({
							title: res.message,
							icon: 'none',
							duration: 3000
						});
					}
					that.listLoading = false;
				}).catch(error => {
					that.tableData = [];
					that.total = 0;
					that.listLoading = false;
					uni.showToast({
						title: '服务器异常:' + JSON.stringify(error),
						icon: 'none',
						duration: 3000
					});
					console.log("error:", error);
				})
			},

			tabCancel(e) {
				this.Tabtatus = 0;
			},
			tabChoose(e) {
				var that = this;
				let value = parseInt(e);
				that.Tabtatus = value;
				if (value > 2) {
					that.TabCur = value - 1;
				} else {
					that.TabCur = value
				}
				that.goTop();
				that.initData(that.searchData);

			},
			tabSelect(e) {
				var that = this;
				that.searchText = '';
				that.TabCur = e.currentTarget.dataset.id;
				that.initData();

			},

		}
	}
</script>

<style>
	.search-input {
		margin-left: 30upx;
		border: 2upx solid #333333;
		width: 70%;
		border-radius: 25upx;
		padding: 10upx;
		font-size: 24rpx;
	}

	.list_main_item {
		width: 720rpx;
	}

	.list_main_item {
		width: 720rpx;
		border-top-right-radius: 50rpx;
		border-bottom-right-radius: 50rpx;
	}

	.big-type-line {
		width: 185rpx;
		height: 8rpx;
		border-radius: 15rpx;
	}

	.scroll_view_pd {
		padding-bottom: 50px;
	}
</style>